<template>
  <div>


    <!--监听属性-->
    <button @click="counter++">点我++</button>
    <table>
      <tr>
        <td>

        </td>
      </tr>
    </table>



    {{ reverse_msg }}


    <!--绑定样式-->
    <div :class="{ active:isactive }" ></div>

    <!--遍历展示-->
    <ul>
      <li v-for="(item,index) in tlist" :class="{on:index%2==0,off:index%2!=0}">

        {{ item.text }}

      </li>

    </ul>

    <div v-if="type === 'A'">

      A
    </div>
    <div v-else-if="type==='B'">
      B
    </div>
    <div v-else>
      C
    </div>
    <h1 v-show="ok">你看见我了</h1>

    {{ msg }}
  </div>
</template>

<script>
    export default {
        name: "test",
      data(){
          return{
            msg:'你好，这里是vue',
            ok:0,
            type:'B',
            tlist:[{text:'汽车'},{text:'房子'},{text:'钞票'}],
            isactive:true,
            counter:0

          }
      },
      //监听属性
      watch:{

          counter:function (nval,oval) {

            console.log('计数器的变化' + '从' + oval + '变成' + nval)

          }

      },
      //计算属性
      computed:{
          //反转
        reverse_msg:function () {

          return '$' + this.msg.split('').reverse().join();

        }
      }
    }
</script>

<style scoped>
  .on {background: black;}
  .off {background: red;}
  .active {

    width: 100px;
    height: 100px;
    background: yellow;

  }
</style>
